<template>
	<view class="brand-page">
		
		<view class="topSafe" :style="'height:'+topSafe+'px'"></view>
		
		<view class="title-w-box-wrapper" :style="{paddingTop: topSafe + 'px', opacity: opacity}">
		</view>
		<view class="title-box-wrapper" :style="{paddingTop: topSafe + 'px'}">
			<view class="main-title">新品区</view>
		</view>

		<view class="main-content">
			<brandSpecialSession dataType="new" :list="list"></brandSpecialSession>
		</view>
		<u-empty
		    mode="list"
			v-if="!list.length"
			text="暂无数据..."
			textSize="28"
			iconSize="120"
		>
		</u-empty>
		<u-loadmore 
			marginTop="20"
			fontSize="28"
			v-if="list.length"
			:status="loadStatus" 
			loading-text="努力加载中" 
			loadmore-text="轻轻上拉" 
			nomore-text="没有更多啦~" 
		/>
	</view>
</template>

<script>
	import brandSpecialSession from './components/brand-special-session';
	import { newProductList } from "@/api/brandHall.js"
	export default {
		components: {
			brandSpecialSession
		},
		data() {
			return {
				opacity: 0,
				topSafe: 0,
				list: [], // 列表
				loadStatus: "nomore", // load 状态
				currentPage: 1,
			}
		},
		onLoad() {
			// uni.setNavigationBarColor({
			//     frontColor: '#ffffff',
			//     backgroundColor: '#ff0000',
			//     animation: {
			//         duration: 400,
			//         timingFunc: 'easeIn'
			//     }
			// })
			uni.getSystemInfo({
				success: (e) => {
					this.topSafe = e.statusBarHeight //状态栏高度
				}
			})
			this.getNewProductList();
		},
		methods: {
			onPageScroll(res) {
				var that = this,
					scrollY = res.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
			},
			/* 获取品牌馆数据 */
			getNewProductList() {
				newProductList({
					page: this.currentPage,
					limit: 20,
				}).then(res => {
					this.list = [...this.list, ...res.data.list];
					this.slideList = res.data.rec_list;
					if(res.data.list < 20) {
						this.loadStatus = "nomore"
					}else {
						this.loadStatus = "loadmore"
					}
				})
			},
			/* 触底 */
			onReachBottom() {
				if(this.loadStatus == "nomore") return
				this.loadStatus = "loading";
				this.currentPage ++;
				this.getNewProductList();
			},
		},
	}
</script>

<style lang="scss" scoped>
	page { background-color: #F5F7FA; }
	.brand-page {
		background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230517/d7e5862814f7a7bd98bd675b96d96086.png');
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: #fff;
		padding-bottom: 40rpx;
		
		.title-w-box-wrapper {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 277;
			display: flex;
			align-items: center;
			padding-left: 80rpx;
			background-color: #fff;
			height: 170rpx;
		}
		
		.title-box-wrapper {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 277;
			display: flex;
			align-items: center;
			padding-left: 80rpx;
			height: 170rpx;
			.main-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
			}
		}
		
		.top-head {
			display: flex;
			align-items: center;
			
			.page-title {
				margin-left: 34rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	
		.main-content {
			padding-top: 350rpx;
			padding-top: calc(350rpx - constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-top: calc(350rpx - env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		}
	}
	
	
	
</style>